<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分配用户</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/util.js"></script>
</head>
<body>


<div id="app">

    <el-button @click="toAdd">添加授权</el-button>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="account"
                label="登录名称">
        </el-table-column>
        <el-table-column
                prop="name"
                label="用户名称">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="手机号">
        </el-table-column>
        <el-table-column
                label="状态">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.state=='禁用'" type="danger">{{scope.row.state}}</el-tag>
                <el-tag v-if="scope.row.state=='启用'" type="success">{{scope.row.state}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                label="创建时间">
            <template slot-scope="scope">
                {{scope.row.createTime|format('yyyy-MM-dd')}}
            </template>
        </el-table-column>

        <el-table-column width="250"
                         label="操作">
            <template slot-scope="scope">
                <el-button  size="small" type="danger" @click="removeRole(scope.row.id)" >取消授权</el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-dialog title="选择用户" :visible.sync="dialogFormVisible">


        <el-table
                :data="tableData4Dialog"  @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号">
            </el-table-column>
            <el-table-column
                    prop="account"
                    label="登录名称">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="用户名称">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="手机号">
            </el-table-column>
        </el-table>





        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addData">确 定</el-button>
        </div>
    </el-dialog>


</div>
<script>
    new Vue({
        el:"#app",
        data:{
            rid:"",
            tableData:[],

            dialogFormVisible: false,
            form: {
                name: '',
                num:"",
            },
            formLabelWidth: '120px',
            tableData4Dialog:[],
            multipleSelection:[],
        },
        watch:{
        },
        filters:{
            format(value,arg){
                function dateFormat(date, format) {
                    if (typeof date === "string") {
                        var mts = date.match(/(\/Date\((\d+)\)\/)/);
                        if (mts && mts.length >= 3) {
                            date = parseInt(mts[2]);
                        }
                    }
                    date = new Date(date);
                    if (!date || date.toUTCString() == "Invalid Date") {
                        return "";
                    }
                    var map = {
                        "M": date.getMonth() + 1, //月份
                        "d": date.getDate(), //日
                        "h": date.getHours(), //小时
                        "m": date.getMinutes(), //分
                        "s": date.getSeconds(), //秒
                        "q": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                        var v = map[t];
                        if (v !== undefined) {
                            if (all.length > 1) {
                                v = '0' + v;
                                v = v.substr(v.length - 2);
                            }
                            return v;
                        } else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                        return all;
                    });
                    return format;
                }

                return dateFormat(value,arg);

            }
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            addData(){
                if(this.multipleSelection.length>0){
                    let uidsArr = [];
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        uidsArr.push(this.multipleSelection[i].id)
                    }

                    let uids = uidsArr.join(",");
                    axios.post(`/user-role/addUserRole?rid=${this.rid}&uids=${uids}`,).then(res=>{
                        this.$message.success("添加授权成功")
                        this.multipleSelection = [];
                        this.dialogFormVisible = false;
                        this.initData()
                        this.initUser4Choose();
                    })
                }else{
                    this.$message.error("请选择一条数据")
                }


            },
            toAdd(){
                this.dialogFormVisible = true;
            },
            removeRole(uid){
                let obj = {uid,rid:this.rid}
                axios.post("/user-role/removeRole",obj).then(res=>{
                    this.$message.success("取消授权成功")
                    this.initData()
                    this.initUser4Choose();
                })
            },
            initData(){

                axios.post("/user-role/findAllUser?rid="+this.rid).then(res=>{
                    this.tableData = res.data;
                })

            },
            initUser4Choose(){
                axios.post("/user/findAllUser4Choose?rid="+this.rid).then(res=>{
                    this.tableData4Dialog = res.data;
                })
            }

        },
        created(){
            this.rid = getQueryString("rid")
            this.initData()
            this.initUser4Choose();
        }
    })
</script>

</body>
</html>
